// 运行监视
<template>
  <div>
    <div class="tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div>
        <!-- 搜索条件 -->
        <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
          <el-form-item>
            <el-input v-model.trim="searchCriteria.namer" prefix-icon="el-icon-search" clearable placeholder="输入设备名称或设备IP" @clear="initList" v-focus></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" class="btnSizeStyle">查询</el-button>
          </el-form-item>
        </el-form>
        <span>运维主机（前卫）</span>
        <!-- 主机展示列表 -->
        <!-- <svg class="iconfont" aria-hidden="true">
          <use xlink:href="#el-icon-mybinding" />
        </svg> -->
        <!-- 主机查询列表显示 -->
        <div>
          <div v-if="searchBtnSwitch">
            <ul class="ul_list" v-loading="tableLoad" v-if="tableData.length > 0">
              <li v-for="(item, index) in tableData" :key="index" :class="activeColor === index ? 'active' : ''" @click="itemBtn(item, index)">
                <span>{{ item.zcmc }}</span>
              </li>
            </ul>
            <ul class="ul_list" v-loading="tableLoad" v-else>
              <li>
                <span>{{ tableMessage }}</span>
              </li>
            </ul>
          </div>
          <div v-else style="padding: 0 15px 50px">
            <treesBox :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
          </div>
        </div>
      </div>
    </div>
    <div class="main_r" :style="{ minHeight: transferHeight.contentH + 'px' }">
      <!-- 主机展示 -->
      <div class="t bg-f2 bg-fff">
        <h2>{{ itemList.zcmc }}</h2>
        <div>
          <ul class="host_list">
            <li>
              <div class="host_top"></div>
              <div class="host_container">
                <!-- 图片 -->
                <el-row :gutter="22">
                  <el-col :span="12" align="right">
                    <img src="@/assets/images/logo.png" alt="" />
                  </el-col>
                  <el-col :span="12" align="center">
                    <img src="@/assets/images/serviceHotline.png" alt="" />
                  </el-col>
                </el-row>
                <el-row :gutter="22" class="aisleName">
                  <el-col :span="12">直流通道</el-col>
                  <el-col :span="12">交流通道</el-col>
                </el-row>
              </div>
              <div class="host_footer">
                <el-row :gutter="22">
                  <el-col :span="12">
                    <ul class="point_list">
                      <li v-for="(item, index) in tableItemData" :style="{ width: 100 / tableItemData.length + '%' }" :key="index">
                        <span v-if="item.passageway < 5" :class="[item.zxzt === 0 ? 'active' : '']"></span>
                      </li>
                    </ul>
                  </el-col>
                  <el-col :span="12">
                    <ul class="point_list">
                      <li v-for="(item, index) in tableItemData" :style="{ width: 100 / tableItemData.length + '%' }" :key="index">
                        <span v-if="item.passageway > 4" :class="[item.zxzt === 0 ? 'active' : '']"></span>
                      </li>
                    </ul>
                  </el-col>
                </el-row>
                <el-row :gutter="22" class="aisleName">
                  <el-col :span="12">
                    <ul class="btn_list">
                      <li v-for="(item, index) in tableItemData" :key="index" :style="{ width: 100 / tableItemData.length + '%' }">
                        <span v-if="item.passageway < 5">{{ index + 1 }}</span>
                      </li>
                    </ul>
                  </el-col>
                  <el-col :span="12">
                    <ul class="btn_list">
                      <li v-for="(item, index) in tableItemData" :key="index">
                        <span v-if="item.passageway > 4" :style="{ width: 100 / tableItemData.length + '%' }">{{ index + 1 }}</span>
                      </li>
                    </ul>
                  </el-col>
                </el-row>
              </div>
            </li>
            <li>
              <div class="host_top"></div>
              <div class="host_container">
                <img src="@/assets/images/powerSupply.jpg" alt="" />
              </div>
              <div class="host_footer">
                <img src="@/assets/images/powerChannel.jpg" alt="" />
              </div>
            </li>
            <li>
              <div>
                <div class="title">主机信息</div>
                <ul class="host_info">
                  <li><span>IP：</span>{{ itemList.ip }}</li>
                  <li>
                    <span>LAN/IoT状态：</span>
                    <div v-if="Number(itemList.zxzt) === 1 || Number(itemList.zxzt) === 2">
                      <!-- 1LAN/IoT在线    2LAN/IoT不在线-->
                      <el-tooltip effect="dark" content="LAN网络" placement="top-start">
                        <svg class="iconfont w_16" aria-hidden="true">
                          <use :xlink:href="`#${Number(itemList.zxzt) === 1 || Number(itemList.zxzt) === 0 ? 'el-icon-myLAN_network' : 'el-icon-myLAN_Nonetwork'}`" />
                        </svg>
                      </el-tooltip>
                      <el-tooltip effect="dark" content="IoT网络" placement="top-start">
                        <svg class="iconfont w_16" aria-hidden="true">
                          <use :xlink:href="`#${Number(itemList.zxzt) === 1 ? 'el-icon-myIoT_network' : 'el-icon-myIoT_Nonetwork'}`" />
                        </svg>
                      </el-tooltip>
                    </div>
                    <div v-else>
                      <!-- 3LAN在线    4IoT在线 -->
                      <el-tooltip effect="dark" content="LAN网络" placement="top-start">
                        <svg class="iconfont w_16" aria-hidden="true">
                          <use :xlink:href="`#${Number(itemList.zxzt) === 3 || Number(itemList.zxzt) === 0 ? 'el-icon-myLAN_network' : 'el-icon-myLAN_Nonetwork'}`" style="font-size: 50px" />
                        </svg>
                      </el-tooltip>
                      <el-tooltip effect="dark" content="IoT网络" placement="top-start">
                        <svg class="iconfont w_16" aria-hidden="true">
                          <use :xlink:href="`#${Number(itemList.zxzt) === 4 ? 'el-icon-myIoT_network' : 'el-icon-myIoT_Nonetwork'}`" style="font-size: 50px" />
                        </svg>
                      </el-tooltip>
                    </div>
                  </li>
                  <!-- 0-正常(绿色)  1-故障(红色) 
                  如果没有网络就是灰色的 -->
                  <li><span>光路状态：</span><span :class="[Number(glzt) === 0 && Number(itemList.zxzt) !== 2 ? 'round active' : 'round']"></span></li>
                  <li><span>内部温度：</span>{{ nbwd }}</li>
                  <li>
                    <span>风扇状态：</span>
                    <svg v-if="fszt !== ''" class="iconfont w_18" aria-hidden="true">
                      <use :xlink:href="`#el-icon-my${fszt}`" />
                    </svg>
                  </li>
                </ul>
              </div>
              <div class="arrow"></div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 详细内容 -->
      <div class="b" v-loading="tableItemLoad">
        <el-row :gutter="20" v-if="tableItemData.length > 0">
          <el-col :span="6" v-for="(item, index) in tableItemData" :key="index">
            <div class="bg-f2 bg-fff">
              <div class="header">
                <svg class="iconfont w_18" aria-hidden="true">
                  <use xlink:href="#el-icon-mybinding" />
                </svg>
                <span>通道{{ item.passageway }}</span>
                <div class="bdType">
                  <svg class="iconfont w_18" aria-hidden="true">
                    <use xlink:href="#el-icon-mybinding" />
                  </svg>
                  <span>已绑定</span>
                </div>
              </div>
              <h2>{{ item.zcmc }}</h2>
              <p class="dy">电压 {{ item.voltage }} - 电流 {{ item.electricCurrent }}</p>
              <p><span :class="[item.zxzt === 0 ? 'active' : '']"></span>{{ item.ip }}</p>
            </div>
          </el-col>
        </el-row>
        <span v-else style="padding: 15px">{{ tableItemMessage }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { ziC, yeWu } from '@/utils/allUrl'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { threeLevelH } from '@/assets/js/calcHeight'
import treesBox from '@/components/treesBox/index.vue'

export default {
  computed: {
    transferHeight() {
      //   // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: 90,
      }
    },
  },
  components: { treesBox },
  data() {
    return {
      treesBox: {
        url: 'ZI_CHAN',
        GZKZ: false,
        quoteType: true,
        ZCLX_XJ: 53,
      },
      shuaxingTree: false,
      searchCriteria: {
        namer: '',
      },
      tableData: [], // 列表
      tableLoad: false, // 表格加载中样式
      tableMessage: '',
      tableTimer: null,
      activeColor: '',
      tableItemLoad: false,
      tableItemTimer: null,
      tableItemData: [],
      tableItemMessage: '',
      itemList: {
        ip: '', // ip
        zxzt: 2, // LAN/IoT状态 默认不在线
        zcmc: '', // 资产名称
      },
      glzt: '',
      nbwd: '',
      fszt: '',
      searchBtnSwitch: false,
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
    tableItemLoad(newVal, oldVal) {
      this.tableItemTimer = setTimeout(() => {
        if (this.tableItemLoad) {
          this.tableItemLoad = false
          this.tableItemData = []
          this.tableItemMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  created() {
    // this.initList()
  },
  mounted() {},
  methods: {
    // tree形搜索
    treeClick(e) {
      if (e.type.levels === 5) {
        console.log(e)
        this.itemBtn(e.type)
      }
    },
    // 查询列表
    async initList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('ZCLX_XJ', 53) // 资产类型ID
      params.append('ZCMC_IP_XH', this.searchCriteria.namer)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectZiChan`, params)
      this.tableLoad = false // 表格加载中样式
      // console.log(res)
      switch (res.code) {
        case '0000': // 操作成功
          this.tableData = res.data.list
          this.total = res.data.total
          // this.activeColor = 0
          // this.itemList = this.tableData[0]
          // this.initItem(this.itemList)
          // this.getHostLastAccept(this.tableData[0])
          break
        default:
          this.tableData = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
    },
    // 选择每一项触发事件
    itemBtn(item, index) {
      if (index) {
        this.activeColor = index
      }
      this.itemList = item
      this.initItem(item)
      this.getHostLastAccept(item)
    },
    // 查询按钮
    onSubmit() {
      // 清除之前的样式
      this.itemList = {
        ip: '', // ip
        zxzt: 2, // LAN/IoT状态 默认不在线
        zcmc: '',
      }
      this.glzt = ''
      this.nbwd = ''
      this.fszt = ''
      // 通道列表数据
      this.tableItemData = []
      this.tableLoad = true
      this.searchBtnSwitch = true
      this.initList()
    },
    // 通道列表
    async initItem(item) {
      clearTimeout(this.tableItemTimer)
      this.tableItemLoad = true
      const params = new URLSearchParams()
      params.append('YWZJ_ID', item.id) // 资产类型ID
      const { data: res } = await this.$http.post(`${yeWu}monitor/selectMonitorById`, params)
      this.tableItemLoad = false
      switch (res.code) {
        case '0000': // 操作成功
          this.tableItemData = res.data
          break
        default:
          this.tableItemData = []
          this.tableItemMessage = res.message
          break
      }
    },
    // 获取内部温度
    async getHostLastAccept(item) {
      // const { data: res } = await this.$http.get(`${zhuJiUrl}hygahost/getHostLastAccept?sn=${item.sbxlh}`)
      const { data: res } = await this.$http.get(`api/host/getHostLastAccept?sn=${item.sbxlh}&hostType=1`) // 更新于2021-04-01
      // console.log(res)
      if (res.code === '0000') {
        const { nedoStatus, temperature } = res.data
        this.nbwd = temperature
        // 判断LAN状态
        var value1 = nedoStatus.trim().split('') // 切割为数组
        var value = value1.reverse() // 翻转LAN状态数组
        this.glzt = value.slice(10, 11)[0] // 存储光路状态
        // 判断风扇状态
        this.getSystemConfig(item)
        // console.log('-----', item)
      }
    },
    // 获取风扇启动温度和停止温度差值
    async getSystemConfig(item) {
      // /api/host/getSystemConfig?sn=202008250018
      const { data: res } = await this.$http.get(`api/host/getSystemConfig?sn=${item.sbxlh}&hostType=1`)
      // console.log(res)
      if (res.code === '0000') {
        // 判断风扇状态
        const { internalFanStartTemperature, fanStopTemperatureDifference } = res.data
        var wd3 = this.nbwd // 内部温度
        var wd1 = 0
        var wd2 = 0
        // 清除单位 保留数字 内部风扇启动温度
        if (internalFanStartTemperature.replace(/[^\d.]/g, '')) {
          wd1 = internalFanStartTemperature.replace(/[^\d.]/g, '')
        }
        // console.log(wd1)
        // 风扇停止温度差值
        if (fanStopTemperatureDifference.replace(/[^\d.]/g, '')) {
          wd2 = fanStopTemperatureDifference.replace(/[^\d.]/g, '')
        }
        // 内部温度 > 内部风扇启动温度 风扇状态开启
        if (wd3 > wd1) {
          this.fszt = 'feng_shan_yun_xing'
        }
        // 内部温度 < 内部风扇启动温度 + 风扇停止温度差值 风扇状态关闭
        if (wd3 < wd1 + wd2) {
          this.fszt = 'feng_shan_ting_zhi'
        }
      }
    },
  },
  destroyed() {
    // clearTimeout(timeBox)
  },
}
</script>
<style lang="scss" scoped>
.footerPagination {
  display: flex;
  justify-content: space-between;
}
.t_container {
  height: 100%;
  .el-col {
    height: 100%;
  }
}
.tree-box.moreLine {
  width: 288px;
  padding: 15px 0 15px;
  .el-input {
    width: 195px;
  }
  .el-form--inline .el-form-item {
    margin-bottom: 0;
    // margin-right: 0;
    &:first-child {
      margin-left: 15px;
    }
    &:last-child {
      margin-right: 0;
    }
  }
  > div {
    > span {
      padding: 10px 15px;
    }
  }
}
.main_r {
  margin-left: 288px;
  padding: 0;
  .t {
    height: 370px;
    > h2 {
      min-height: 24px;
      font-size: 18px;
      padding: 10px 0 25px;
      text-align: center;
    }
    // 主机展示
    .host_list {
      height: 246px;
      display: flex;
      justify-content: center;
      > li {
        float: left;
        height: 100%;
        .host_top,
        .host_footer {
          height: 62px;
        }
        .host_container {
          height: 122px;
          z-index: 10;
          position: relative;
          box-sizing: border-box;
        }
        &:first-child {
          width: 410px;
          > div {
            background-color: #fff;
            box-shadow: 0px 2px 12px 6px rgba(0, 0, 0, 0.1);
            border-color: #e7e7e8;
          }
          .host_container {
            padding-top: 30px;
            img {
              height: 30px;
            }
            .aisleName {
              padding-top: 35px;
              padding-left: 15px;
            }
          }
          .host_footer {
            box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
            border: 1px solid #e6e6e7;
            padding-top: 10px;
            box-sizing: border-box;
          }
        }
        &:nth-child(2) {
          width: 248px;
          > div {
            background-color: #f84215;
            box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.2);
            border-color: #e7e7e8;
          }
          .host_container,
          .host_footer {
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              height: 108px;
            }
          }
          .host_footer {
            img {
              height: 26px;
            }
          }
        }
        &:last-child {
          position: relative;
          width: 384px;
          padding: 20px;
          box-sizing: border-box;
          margin-left: 20px;
          > div:not(.arrow) {
            padding: 20px;
            border: 1px solid #dcdcdc;
            box-sizing: border-box;
            border-radius: 10px;
            height: 100%;
            box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
          }
          .title {
            font-size: 14px;
            padding-bottom: 10px;
          }
          // 三角形
          .arrow {
            position: absolute;
            border-style: solid;
            border-width: 10px;
            border-color: transparent #dcdcdc transparent transparent;
            top: 50%;
            transform: translateY(-50%);
            left: 1px;
            &:after {
              content: '';
              position: absolute;
              top: -9px;
              left: 1px;
              border-top: 9px solid transparent;
              border-right: 9px solid #ffffff;
              border-bottom: 9px solid transparent;
            }
          }
          .host_info {
            li {
              position: relative;
              padding-left: 105px;
              height: 28px;
              width: 100%;
              line-height: 28px;
              > span {
                &:first-child {
                  position: absolute;
                  width: 100px;
                  top: 0;
                  left: 0;
                  text-align: right;
                  color: #7a7a7a;
                }
              }
              .round {
                display: inline-block;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: #c7c7c7;
                &.active {
                  background: #67c23a;
                }
              }
              svg {
                vertical-align: text-bottom;
              }
              .w_16 {
                width: 16px;
                height: 14px;
                margin-right: 10px;
              }
              .w_18 {
                width: 18px;
                height: 18px;
              }
            }
          }
        }
      }
    }
  }
  .b {
    padding: 15px 0;
    min-height: 100px;
    .el-col {
      padding-bottom: 15px;
    }
    .el-row {
      margin-left: 0 !important;
      margin-right: 0 !important;
      .header {
        position: relative;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        svg {
          vertical-align: middle;
          margin-right: 5px;
        }
        > svg {
          width: 20px;
          height: 20px;
        }
        .bdType {
          position: absolute;
          right: 0;
          top: 0;
          svg {
            width: 12px;
            height: 12px;
          }
          color: #039d12;
          font-size: 12px;
        }
      }
      h2 {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; //作为弹性伸缩盒子模型显示。
        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
        -webkit-line-clamp: 1; //显示的行
        padding-top: 10px;
      }
      p {
        &.dy {
          padding: 15px 0 15px;
        }
        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 5px;
          background: #c7c7c7;
          &.active {
            background: #67c23a;
          }
        }
      }
    }
    .noData {
      line-height: 93px;
      height: 93px;
      text-align: center;
      color: #909399;
    }
  }
}
.ul_list {
  min-height: 100px;
  padding-bottom: 45px;
  > li {
    line-height: 28px;
    padding: 0 15px;
    &.active {
      color: #1989fa;
      background-color: #e5f5ff;
      &:hover {
        cursor: pointer;
        background-color: #e5f5ff;
        opacity: 1;
      }
    }
    &:hover {
      cursor: pointer;
      color: #1989fa;
      background-color: #f2f2f2;
      opacity: 0.5;
    }
  }
}
.point_list,
.btn_list {
  min-height: 10px;
  padding-left: 15px;
  > li {
    float: left;
    box-sizing: border-box;
    text-align: center;
    span {
      display: inline-block;
    }
  }
}
.point_list {
  > li {
    span {
      height: 12px;
      position: relative;
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #c7c7c7;
      }
      &.active {
        &::after {
          background: #67c23a;
        }
      }
    }
  }
}
.btn_list {
  > li {
    padding: 0 3px;
    span {
      width: 100%;
      height: 18px;
      line-height: 18px;
      background-color: #f4f4f4;
      color: #949596;
    }
  }
}
</style>
